<template>
  <div class="container" v-if="showPage">
    <div
      class="user-panel"
      :style="bgImage"
    >
      <div class="user-panel-box">
        <div
          class="user-info"
          v-if="user"
        >
          <van-image
            :src="avatar"
            fit="cover"
            round
          >
            <template v-slot:loading>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
          </van-image>
          <h3>{{user.nickname}}</h3>
          <div>收藏 {{user.collects}} | 经验 {{user.experiences}}</div>
        </div>
        <div
          v-else
          class="user-unlogin"
        >
          <van-button
            size="small"
            color="linear-gradient(to right, #f28d5e 0%,#ff8514 50%,#ff9e30 50%,#ff830f 100%)"
            round
            @click="onLogin"
          >登录 · 注册</van-button>
          <p>登录后可查看个人信息</p>
        </div>
      </div>
      <div class="user-vip">
        <div class="user-vip-inner">
          <van-cell
            :title="hurdle.title"
            :icon="hurdle.icon"
            center
            :border="false"
            v-if="hurdle"
          >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-button
                size="mini"
                round
                color="#DEC8B1"
                v-if="hurdle.button"
              >{{hurdle.button}}</van-button>
            </template>
          </van-cell>
        </div>
      </div>
    </div>
    <div class="user-actions">
      <van-cell-group
        class="mv-15"
        :border="false"
      >
        <van-cell
          title="我的订单"
          value="全部订单"
          is-link
          :to="{path:'/order/list/all'}"
        />
        <van-grid
          v-if="orderNavs.length>0"
          :border="false"
        >
          <van-grid-item
            :icon="item.icon"
            :text="item.label"
            v-for="(item,index) in orderNavs"
            :key="index"
            :to="item.url"
          />
        </van-grid>
      </van-cell-group>
      <!-- 轮播展示 -->
      <van-swipe
        class="swipe-scale broadcast"
        :autoplay="10000"
      >
        <van-swipe-item
          v-for="(swipe, index) in broadcast"
          :key="index"
        >
          <router-link :to="swipe.weblink">
            <van-image
              :src="swipe.thumb"
              fit="cover"
              radius="5px"
            >
              <template v-slot:loading>
                <van-loading
                  type="spinner"
                  size="20"
                />
              </template>
              <template v-slot:error>
                <van-loading
                  type="spinner"
                  size="20"
                />
              </template>
            </van-image>
          </router-link>
        </van-swipe-item>
      </van-swipe>
      <!-- 我的功能 -->
      <van-cell-group
        class="mv-15"
        :border="false"
      >
        <van-cell title="我的功能" />
        <van-grid
          v-if="funcs.length>0"
          :border="false"
        >
          <van-grid-item
            :icon="item.icon"
            :text="item.label"
            v-for="(item,index) in funcs"
            :key="index"
            :to="item.url"
            @click="onGridItemClick(item)"
          />
        </van-grid>
      </van-cell-group>
      <!-- 更多 -->
      <van-cell-group
        class="mv-15"
        :border="false"
      >
        <van-cell title="更多" />
        <van-grid
          v-if="others.length>0"
          :border="false"
        >
          <van-grid-item
            :icon="item.icon"
            :text="item.label"
            v-for="(item,index) in others"
            :key="index"
            :to="item.url"
          />
        </van-grid>
      </van-cell-group>
    </div>
    <van-overlay
      :show="showShare"
      @click="showShare = false"
    >
      <div class="guide-mask guide-mask-share guide-mask-wechat" />
    </van-overlay>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Icon,
  Image,
  Loading,
  Swipe,
  SwipeItem,
  Cell,
  CellGroup,
  Grid,
  GridItem,
  Button,
  Overlay
} from 'vant'
import ScaleBox from '@/components/scalebox'

export default {
  components: {
    ScaleBox,
    [Image.name]: Image,
    [Loading.name]: Loading,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Overlay.name]: Overlay,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  data () {
    return {
      user: null,
      defaultAvatar: '../../static/images/logo.png',
      defaultBg: '../../static/images/bg_data.png',
      hurdle: null,
      orderNavs: [],
      broadcast: [],
      funcs: [],
      others: [],
      showPage: false,
      showShare: false,
      showDownload: false
    }
  },
  computed: {
    avatar () {
      if (this.user && this.user.avatar) {
        return this.user.avatar
      }
      return this.defaultAvatar
    },
    bgImage () {
      if (this.user && this.user.avatar) {
        return {
          backgroundImage: 'url(' + this.user.avatar + ')'
        }
      }
      return null
    },
    pannelBoxStyle () {
      return { backgroundImage: this.bgcolor }
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    onLoad () {
      this.$http.user.center().then(res => {
        const { data } = res
        this.user = data.user
        this.hurdle = data.hurdle
        this.orderNavs = data.order_badges
        this.broadcast = data.broadcast
        this.funcs = data.funcs
        this.others = data.others
        this.setSharePageData(data.share_data)
        this.showPage = true
      })
    },
    onLogin () {
      this.$router.push({
        path: '/passport/login'
      })
    },
    onDelete () {
      this.value = this.value.slice(0, this.value.length - 1)
    },
    onGridItemClick (item) {
      if (item.click === 'onShare') {
        this.onShare()
      }
    },
    onShare () {
      if (this.showDownload) {
        this.$router.push({
          path: '/download/app'
        })
      } else {
        this.showShare = true
      }
    },
    setSharePageData (shareData) {
      let shareParams = {
        title: '优越定制',
        link: location.href,
        desc: ''
      }
      if (shareData) {
        shareParams.title = shareData.title
        shareParams.link = shareData.link
        shareParams.imgUrl = shareData.thumb
        shareParams.desc = shareData.description
      }
      this.$store
        .dispatch('share/setData', shareParams)
        .then(res => {
          console.log(res)
        })
        .catch(e => {
          this.showDownload = true
        })
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  &-panel {
    position: relative;
    background: radial-gradient(ellipse at center, #e8737c 0%, #e7374c 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    overflow: hidden;

    &::before {
      content: "";
      width: 120%;
      height: 120%;
      position: absolute;
      left: -10%;
      top: -10%;
      background: inherit;
      filter: blur(10px);
      z-index: -1;
    }
    &-box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 250px;
    }
  }
  &-unlogin {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
  }
  &-info {
    padding: 50px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    .van-image {
      width: 60px;
      height: 60px;
    }
    h3 {
      color: rgba(255, 255, 255, 0.8);
    }
  }
  &-vip {
    padding: 0 15px;
    position: relative;
    &::after {
      position: absolute;
      left: 0;
      top: 50%;
      height: 50%;
      width: 100%;
      background: #f5f5f5;
      content: "";
      z-index: -1;
    }
    &-inner {
      background: #f3e5c0;
      border-radius: 5px;
      .van-cell {
        background: transparent;
      }
    }
  }

  &-group {
    margin-bottom: 0.3rem;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
.user-actions {
  padding: 0 15px;
  .van-cell-group {
    border-radius: 5px;
    .van-cell {
      border-radius: 5px;
      &__value {
        font-size: 12px;
      }
      &__right-icon {
        margin: 0;
      }
    }
    /deep/ .van-grid {
      border-radius: 0 0 5px 5px;
      &-item {
        &:first-child {
          .van-grid-item__content {
            border-radius: 0 0 0 5px;
          }
        }
        &:last-child {
          .van-grid-item__content {
            border-radius: 0 0 5px 0;
          }
        }
      }
    }
  }
  .broadcast {
    margin: 15px 0;
    .van-swipe-item /deep/ {
      &::before {
        padding-top: 33.3333%;
      }
    }
  }
}
</style>
